
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<TITLE>使用easyui validatebox 验证</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- easyui.css改变了2157行 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" id="swicth-style">
<script type="text/javascript" src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/easyui/easyui.validatebox-ext.js"></script>

<style type="text/css">
.input-label{
	text-align: right;
}
.script{
	position:relative;
	left:50px;
	top:20px;
}
code{color:#d93a49;}
</style>

<script type="text/javascript">
$(function(){
/* 
	//方式1：表单提交  
    $('#myForm').form({
        url:'/ProcessServlet',
        onSubmit: function(){
            return $(this).form('validate'); //验证
        },
        success:function(data){
            alert(data);
        }
    });
*/

	//时间输入框
	$('#theTime').datebox({  
    	required:true
	});
});

//方式2：表单提交  
function submitForm(){
	//easyui的form上调用validate方法
	var valid = $("#myForm").form("validate"); //实际form("validate")是调用用easyui的验证方法

	//如果都验证成功,提交表单
	if(valid){
		//检测用户名
		$('#myForm').submit(); //表单提交
	}else{
		return false;
	}
}
</script>


</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<pre class="script">
	<b>1. 最少需引入以下文件：</b>
		&lt;link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" id="swicth-style"&gt;
		&lt;script type="text/javascript" src="../js/jquery-1.9.0.js"&gt;&lt;/script&gt;
		&lt;script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"&gt;&lt;/script&gt;
		&lt;script type="text/javascript" src="../js/easyui/easyui-lang-zh_CN.js"&gt;&lt;/script&gt;
		&lt;script type="text/javascript" src="../js/easyui/easyui.validatebox-ext.js"&gt;&lt;/script&gt;

	<b>2. 为验证的表单元素增加
	  类样式class="easyui-validatebox"和
	  属性data-options="...",
	  如
	  <code>&lt;input name="username" class="easyui-validatebox" data-options="required:true,validType:['length[4,10]','username']">：</code></b>
	 <b style="color:red;">3.默认情况easyui的验证是不会阻止表单提交的，需手动控制。</b>
</pre>
<br/>
	<form  action="user!regist.action" method="post" id="myForm" ;">
		<table align="center">
			<tr>
				<td>用户注册：</td>
				<td>使用 easyui.validatebox 验证</td>
			</tr>
			<tr>
				<td colspan="2"><hr/></td>
			</tr>
			<tr>
				<td class="input-label">用户名：</td>
				<td><input id="uname" type="text" name="username" class="easyui-validatebox" data-options="required:true,validType:['length[4,10]','username']"><span style='color:red;'>*</span></td>
			</tr>
			<tr>
				<td class="input-label">密码：</td>
				<td>
					<input id="pwd" type="password" name="password" class="easyui-validatebox" required="required" validType="safepass"><span style='color:red;'>*</span>
				</td>
			</tr>
			<tr class="control-group"> 
				<td class="input-label">重复密码：</td>
				<td>
					<input id="psw2" type="password" name="pwd_confirm" class="easyui-validatebox" data-options="required:true,validType:['safepass','same[\'#pwd\']']"><span style='color:red;'>*</span>
				</td>
			</tr>
			<tr>
				<td class="input-label">邮箱地址：</td>
				<td><input id="email" type="text" name="email" class="easyui-validatebox" data-options="validType:['email']"></td>
			</tr>
			<tr>
				<td>联系电话：</td>
				<td><input id="tel" type="text" name="tel" class="easyui-validatebox" data-options="validType:['phone']"></td>
			</tr>
			<tr>
				<td class="input-label">时间：</td>
				<td><input id="theTime" type="text" name="theTime"><!-- class="easyui-datebox" --></td>
			</tr>
			<tr>
				<td class="input-label">性别：</td>
				<td >
					<input type="radio" name="gender" value="M" class="easyui-validatebox">男&nbsp;
					<input type="radio" name="gender" value="F" class="easyui-validatebox" validType="radio['gender']">女   
					<label id="genderMsg"></label>
				</td>
			</tr>
			<tr>
				<td class="input-label">技能：</td>
				<td>
					<input type="checkbox" name="cb1" class="easyui-validatebox" value="1" />HTML
					<input type="checkbox" name="cb1" class="easyui-validatebox" value="2" />SQL
					<input type="checkbox" name="cb1" class="easyui-validatebox" value="3"/>JAVA
					<input type="checkbox" name="cb1" class="easyui-validatebox" value="4" validType="checkbox['cb1',3]"/>Struts
				</td>
			</tr>
			<tr>
				<td><input id="regbut" type="button" value="注册"  class="btn" onclick="submitForm();">&nbsp;</td>
				<td><input id="reset" type="reset" value="重置" class="btn"></td>
			</tr>
		</table>
	</form>
	
</BODY>
</HTML>